<template>
	<view class="page-container">
		<view class="search-container">
			<!-- <u-avatar :src="avatar" class="logo2" alt="logo"></u-avatar> -->
			<image v-if="!isTips" :src="avatar" class="logo2" alt="logo"></image>
			<image v-else src="/static/images/left.png" class="left-icon" alt="logo" @click="goBack()"></image>
			<view class="search">
				<up-search :placeholder="$t('searchPlaceholder')" :show-action="false" :clearabled="true"
					bgColor="rgba(187,187,187,0.3)" borderColor="rgba(187,187,187,0.3)" placeholder-color="#FFFFFF"
					search-icon-color="#FFFFFF" height="1.7rem" @click="goSearchPage('list')" :disabled="true"
					style="background-color: rgba(187,187,187,0.8);border-radius: 64rpx;"></up-search>
				<!-- <image src="/static/icon/camera.png" class="icon-camera" alt="icon"></image> -->
			</view>
		</view>

		<scroll-view scroll-y="false" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh"
			refresher-background="rgba(239,220,226,0.9)" class="container-scroll">
			<view class="content-box">
				<view class="list-box">
					<!-- <scroll-view scroll-y class="menu-scroll"> -->
					<up-list @scrolltolower="loadMoreProducts" class="menu-scroll" :pagingEnabled="true"
						:scrollable="true">
						<Menu ref="menuRef" :pageInfo="pageInfo" @updatePageInfo="updatePageInfo"></Menu>
					</up-list>
					<!-- </scroll-view> -->
				</view>
				<view class="show-box">
					<up-list class="products-scroll">
						<!-- <scroll-view scroll-y class="products-scroll"> -->
						<Products ref="productsRef"></Products>
						<!-- </scroll-view> -->
					</up-list>
				</view>
			</view>
		</scroll-view>
		<!-- 下拉刷新回到商品首页 -->
		<view v-if="isTips" style="margin: 0 auto;color: #8b8b8b;font-size: 14px;margin-bottom: 0.1rem;">
			{{$t('pullDown')}}
		</view>
		<!-- 监听子组件发射的事件 @tab-click="handleTabClick"-->
		<my-tabbar :tabbarData="1" ></my-tabbar>
	</view>
</template>

<script setup lang="ts">
	import Search from '@/components/search.vue';
	import Menu from '@/components/menu.vue';
	import Products from '@/components/Products.vue'
	import myTabbar from '@/components/myTabbar.vue'
	import { onPullDownRefresh, onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app'
	import { nextTick, ref, watch } from 'vue'
	import { useCommonStore } from '../../stores/useCommonStore';
	import { getFull } from '@/api/meApi/me.js'

	onShow(() => {
		if (uni.getStorageSync('token')) getAvatar()
	})
	onLoad(() => {
		storageLang.value = uni.getStorageSync('lang')
	})
	const commonStore = useCommonStore();
	const storageLang = ref('') //0716 记录语言
	// 如需监听状态变化（可选）
	watch(() => commonStore.activeIndex, (newIndex) => {
		// console.log('Tab 切换到：', newIndex)
		let lang = uni.getStorageSync('lang')
		// console.log("1111111111", storageLang.value, lang)
		if (newIndex == 1 && storageLang.value != lang) {
			// 调用子组件方法
			if (menuRef.value) {
				menuRef.value.getMenuList({
					current: 1,
					lang: uni.getStorageSync('lang'),
					product_name: ''
				})
			} else {
				console.error('Menu 组件引用未正确初始化')
			}
			commonStore.setTipsWord(false)
			storageLang.value = lang
		}
	})
	// 子组件方法
	// const handleTabClick = (tabInfo) => {
	// 	console.log('【父组件】接收到 tab-click:', tabInfo);
	// 	let lang = uni.getStorageSync('lang')
	// 	console.log("1111111111", storageLang.value, lang)
	// 	if (tabInfo.index == 1 && storageLang.value != lang) {
	// 		// 调用子组件方法
	// 		if (menuRef.value) {
	// 			menuRef.value.getMenuList({
	// 				current: 1,
	// 				lang: uni.getStorageSync('lang'),
	// 				product_name: ''
	// 			})
	// 		} else {
	// 			console.error('Menu 组件引用未正确初始化')
	// 		}
	// 		commonStore.setTipsWord(false)
	// 		storageLang.value = lang
	// 	}
	// }
	
	//0716 tab点击事件
	// onTabItemTap((item) => {
	// 	console.log('全局 Tab 点击:', item)
	// 	let lang =uni.getStorageSync('lang')
	// 	console.log("1111111111",storageLang.value,lang)
	// 	if(item.index==1 && storageLang.value != lang){
	// 		// 调用子组件方法
	// 		if (menuRef.value) {
	// 			menuRef.value.getMenuList({
	// 				current: 1,
	// 				lang: uni.getStorageSync('lang'),
	// 				product_name: ''
	// 			})
	// 		} else {
	// 			console.error('Menu 组件引用未正确初始化')
	// 		}
	// 		commonStore.setTipsWord(false)
	// 	}
	// })


	const isTips = ref(false)
	// 监听 store 变化
	watch(() => commonStore.tipsWord, (newVal) => {
		// if (newVal) {
		isTips.value = commonStore.tipsWord;
		// }
	},
		{ deep: true, immediate: true },// 深度监听数组内部变化
	)
	const avatar = ref('/static/images/logo.png')
	const menuRef = ref<{ getMenuList : (params : any) => void } | null>(null)
	const productsRef = ref<InstanceType<typeof Products> | null>(null)
	function getAvatar() {
		getFull().then(res => {
			avatar.value = res.data.avatarUrl
		})
	}
	// 用于存储当前选中的索引
	const selectedIndex = ref<number>(-1);

	// 分页信息
	const pageInfo = ref({
		currentPage: 1,
		hasMore: true,
		loading: false
	});
	function goBack() {
		uni.navigateTo({
			url: `/pages/search/searchHome?page=list`
		})
	}
	// console.log('选中的索引：', commonStore.nowSelectedId)
	function goSearchPage(page : string) {
		uni.navigateTo({
			url: `/pages/search/searchHome?page=${page}`
		})
	}
	const params = ref({
		current: 1,
		lang: uni.getStorageSync('lang'),
		product_name: ''
	});
	onPullDownRefresh(() => {
		console.log('触发下拉刷新')
		if (uni.getStorageSync('token')) getAvatar()
		// 调用子组件方法
		if (menuRef.value) {
			menuRef.value.getMenuList({
				current: 1,
				lang: uni.getStorageSync('lang'),
				product_name: ''
			}) // 移除可选链操作符，强制触发错误（便于调试）
		} else {
			console.error('Menu 组件引用未正确初始化')
		}
		uni.stopPullDownRefresh();// 关闭下来刷新动画效果
		commonStore.setTipsWord(false)
	})

	// 下拉刷新
	const triggered = ref(false)
	function onRefresh() {
		triggered.value = true
		console.log('触发下拉刷新111')
		try {
			// 等待异步操作完成
			if (uni.getStorageSync('token')) {
				getAvatar()
			}
			// 调用子组件方法
			if (menuRef.value) {
				menuRef.value.getMenuList({
					current: 1,
					lang: uni.getStorageSync('lang'),
					product_name: ''
				})
			} else {
				console.error('Menu 组件引用未正确初始化')
			}
			commonStore.setTipsWord(false)
		} catch (error) {
			console.error('刷新失败:', error)
		} finally {
			// triggered.value = false
			// 确保在所有操作完成后再关闭刷新动画
			setTimeout(() => {
				triggered.value = false
			}, 500) // 延迟 1 秒关闭动画
		}
	}
	onLoad((options : any) => {
		uni.hideTabBar()//  隐藏底部导航栏
	})
	// 更新分页信息
	function updatePageInfo(info : { currentPage : number; hasMore : boolean }) {
		pageInfo.value = {
			...pageInfo.value,
			...info,
			loading: false
		};
	}
	// 加载更多产品
	function loadMoreProducts() {
		if (!pageInfo.value.loading && pageInfo.value.hasMore) {
			// 更新当前页
			pageInfo.value = {
				...pageInfo.value,
				currentPage: pageInfo.value.currentPage + 1,
				loading: true
			};

			// 加载更多数据
			menuRef.value?.getMenuList({
				current: pageInfo.value.currentPage,
				lang: uni.getStorageSync('lang'),
				product_name: ''
			});
		}
	}
</script>

<style scoped lang="scss">
	html,
	body {
		/* 防止根元素出现滚动条 */
		overflow: hidden;
		height: 100vh;
		margin: 0;
		padding: 0;
	}

	.page-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 2rem;
		/* #ifdef  MP-WEIXIN*/
		padding-top: 2.4rem;
		/* #endif*/
	}

	.search-container {
		flex-shrink: 0;
		/* 防止搜索框被压缩*/
		display: flex;

	}

	.logo2 {
		margin: 0.6rem 0 0 0.8rem;
		width: 2.2rem;
		height: 2.2rem;
		line-height: 2.2rem;
		border-radius: 50%;
		z-index: 3;
	}

	.left-icon {
		margin: 1rem 0 0 0.8rem;
		width: 1.5rem;
		height: 1.5rem;
		line-height: 1.5rem;
		border-radius: 50%;
		z-index: 3;
	}

	.search {
		position: relative;
		margin: 0.83rem 0 0 0.5rem;
		width: 80%;
		height: 1.94rem;
		z-index: 3;
		/* #ifdef  MP-WEIXIN*/
		width: 8.5rem;
		/* #endif*/
	}

	.icon-camera {
		position: absolute;
		top: 0.2rem;
		right: 0.7rem;
		width: 1.5rem;
		height: 1.5rem;
	}

	.container-scroll {
		height: calc(100vh - 9.5rem);
		// background-color: #eee;
	}

	.content-box {
		flex: 1;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		padding: 0.5rem;
		padding-bottom: 0;
		overflow: hidden;
		// height: calc(100vh - 8.7rem);
		/* 防止内容溢出*/
	}

	.list-box {
		width: 7rem;
		// height: 100%;
		height: calc(100vh - 10.5rem);
		/* 设置固定高度 */
		overflow: hidden;
		/* 确保内容不会溢出容器*/
	}

	.menu-scroll {
		width: 100%;
		padding-bottom: 1rem;
		box-sizing: border-box;
		height: 100% !important;
	}

	::v-deep .u-list {
		width: 100%;
		height: 100% !important;
	}

	.show-box {
		margin-left: 0.1rem;
		flex: 1;
		// height: auto;
		overflow: hidden;
		height: calc(100vh - 10.5rem);
	}

	.products-scroll {
		width: 100%;
		box-sizing: border-box;
		height: 100% !important;
	}
</style>